<template>
  <el-col :span="2" v-for="artCat in artCatList.Data" :key="artCat">
    <el-card shadow="hover" @click="gotoArt(artCat.ID)"> {{ artCat.category_name }} </el-card>
  </el-col>
</template>

<script lang="ts">
import {defineComponent,reactive} from 'vue';
import request from "@/utils/request";
import {Avatar,} from "@element-plus/icons";
import route from "@/router";
export default defineComponent({
  name: 'ArtCat',
  setup(){
    const artCatList = reactive({
      "PageSize": 5,
      "PageNum": 1,
      "Total": 0,
      "TotalPage": 0,
      "Data": [
        {
          "ID": 10,
          "CreatedAt": "0001-01-01T00:00:00Z",
          "UpdatedAt": "0001-01-01T00:00:00Z",
          "DeletedAt": null,
          "category_name": "5"
        }
      ]
    })
    const getArtCat = () => {
      request.post("artCat", {'PageSize':artCatList.PageSize,'PageNum':artCatList.PageNum}).then((res:any) => {
        if (res.code == 200){
          artCatList.Data = res.data.Data
          console.log(artCatList.Data)
        }
      })
    }

    const gotoArt = (artCat_id) => {
      route.push({
        path:`/artList/${artCat_id}`
      })
    }
    return {
      Avatar,
      getArtCat,
      artCatList,
      gotoArt
    }
  },
  beforeMount(){
    this.getArtCat()
  }
})
</script>

<style scoped>

</style>